var BillMaterialForm = function () {
  var template = /*html*/ `
    <div class="bill-material-form" v-loading.fullscreen.lock="loading">
      <div class="form-content" style="width:400px;border-right:1px solid #cccccc">
        <material-form v-if="billOrder!==null" ref="materialForm" :bill-material="material" :order="billOrder" :dropdown-option="dropdownOption" 
          :mode="mode" @save-bill-order="saveBillOrder"></material-form>
      </div>
      <div class="material-info" style="width:calc(100% - 421px);">
        <query-material-table v-if="billOrder!==null" :order="billOrder" @select-row="selectMaterial"></query-material-table>
      </div>

      <el-dialog title="选择默认仓位" :visible.sync="openDialog" :close-on-click-modal="false" :close-on-press-escape="false" 
        :show-close="false" top="calc(50vh - 77px)" width="420px" append-to-body>
        <div v-if="openDialog" style="padding:0 15px 10px;">
          <el-select v-model="warehouse" style="width:100%" placeholder="请选择默认仓位">
            <el-option value="原材料仓"></el-option>
            <el-option value="辅料仓"></el-option>
          </el-select>
          <div style="text-align:center;margin-top:10px;">
            <el-button size="samll" type="primary" @click="ensure">确定</el-button>
            <el-button size="samll" type="danger" @click="dialogClose">取消</el-button>
          </div>
        </div>
      </el-dialog>
    </div>
  `;

  return {
    props: {
      mode: {
        type: String,
        defualt: 'add'
      },
      material: {
        type: Object,
        defualt: null
      },
      order: {
        type: Object,
        required: true
      },
      dropdownOption: {
        type: Object,
        required: true
      }
    },

    data: function () {
      return {
        loading: false,
        billOrder: null,
        openDialog: false,
        warehouse: '原材料仓'
      };
    },

    mounted: function () {
      var order = this.order;
      var material = this.material;
      var billOrder = _.cloneDeep(order);
      if (material !== null) {
        this.billOrder = billOrder;
        return;
      }

      this.openDialog = true;
    },

    methods: {
      selectMaterial: function (material) {
        this.$refs['materialForm'].resetForm(material);
      },

      saveBillOrder: function (material, canUpdate) {
        if (!material.checkValid(canUpdate)) {
          return;
        }

        var postData = material.getObject(canUpdate);
        var mode = this.mode;
        if (mode === 'add') {
          this.addBillOrder(postData, mode, canUpdate);
        } else if (mode === 'update') {
          this.updateBillOrder(postData, mode, canUpdate);
        }
      },

      addBillOrder: function (postData, mode, canUpdate) {
        this.loading = true;
        var self = this;
        ajaxRequest('feedOrder/addOrderInfoDetail', postData).then(function () {
          self.loading = false;
          self.$alert('新增物料成功', '信息', {
            callback: function () {
              self.$emit('save-success', mode, canUpdate);
            }
          });
        }).catch(function () {
          self.loading = false;
        });
      },

      updateBillOrder: function (postData, mode, canUpdate) {
        var material = this.material;
        postData.orderInfoDetailId = material.id;
        postData.type = 'update';

        this.loading = true;
        var self = this;
        ajaxRequest('feedOrder/updateOrderInfoDetail', postData).then(function (res) {
          self.loading = false;
          self.$alert(res, '信息', {
            callback: function () {
              self.$emit('save-success', mode, canUpdate);
            }
          });
        }).catch(function () {
          self.loading = false;
        });
      },

      ensure: function () {
        this.openDialog = false;
        var order = this.order,
          warehouse = this.warehouse;
        var billOrder = _.cloneDeep(order);
        billOrder.defaultWarehouse = warehouse;
        this.billOrder = billOrder;
      },

      dialogClose: function () {
        this.openDialog = false;
        this.$emit('close-dialog');
      }
    },

    components: {
      QueryMaterialTable: QueryMaterialTable,
      MaterialForm: MaterialForm
    },

    template: template
  };
}();